<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="change-box flexWrapNo" :style="{top:customHeight.top+'px',height:customHeight.height+'px'}" @tap="goPage('/pages/home/storeList')">
					切换门店
					<image src="../../static/home/change.png" class="change-icon"></image>
				</view>
				<view class="shop-box" :style="{paddingTop:navHeight+'px'}">
					<swiper class="banner-box"  :autoplay="true"  :interval="3000" :duration="1000">
						<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="index" @tap="previewImage(item,bannerList)">
							<view class="shop-img">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="shop-info">
						<view class="info-top flexWrap">
							<view class="shop-name-box flexWrapNo">
								<view class="shop-name">{{storeInfo.shop_name}}</view>
								<view class="shop-status" :class="{'repair-status':storeInfo.store_status_data!='business'}">
									<block v-if="storeInfo.store_status_data=='business'">营业中</block>
									<block v-else-if="storeInfo.store_status_data=='rest'">休息中</block>
									<block v-else>筹备中</block>
								</view>
							</view>
							<view class="navigation-box flexWrapNo" @tap="navigation()">
								<image src="../../static/home/navigation-icon.png" class="navigation-icon"></image>
								<text>导航</text>
							</view>
						</view>
						<view class="address-info flexWrap">
							<text>{{storeInfo.location||'加载中...'}}</text>
							<text style="flex: none;">距你{{storeInfo.distance||'0km'}}</text>
						</view>
					</view>
				</view>
				<!-- <scroll-view scroll-x="true" style="height: 170rpx;margin-top: 34upx;" v-if="isShowRoute==1">
					<view class="gn-box flexWrap">
						<view class="gn-item flexWarpCenterColumn" @tap="goPage('/pages/home/taskList')">
							<view class="gn-img">
								<image src="../../static/home/task-img.png"></image>
							</view>
							<text>任务挑战</text>
						</view>
						<view class="gn-item flexWarpCenterColumn" @tap="goPage('/pages/home/openDoor')" v-if="open==1">
							<view class="gn-img">
								<image src="../../static/home/openDoor.png"></image>
							</view>
							<text>开门</text>
						</view>
						<view class="gn-item flexWarpCenterColumn" @tap="goPage('/pages/home/roadMap')" v-if="position_navigation==1">
							<view class="gn-img">
								<image src="../../static/home/gn1.png"></image>
							</view>
							<text>路线图</text>
						</view>
						<view class="gn-item flexWarpCenterColumn" @tap="showTips()" v-if="tuan_verification_coupon==1">
							<view class="gn-img">
								<image src="../../static/home/gn2.png"></image>
							</view>
							<text>团购验券</text>
						</view>
						<view class="gn-item flexWarpCenterColumn" @tap="goPage('/pages/home/contactService')" v-if="contact_customers==1">
							<view class="gn-img">
								<image src="../../static/home/gn3.png"></image>
							</view>
							<text>联系客服</text>
						</view>
						<view class="gn-item flexWarpCenterColumn" @tap="goPage('/pages/home/wifiLink')" v-if="one_click_wifi==1">
							<view class="gn-img">
								<image src="../../static/home/gn4.png"></image>
							</view>
							<text>一键WIFI</text>
						</view>
						<view class="gn-item flexWarpCenterColumn" @tap="goPage('/pages/home/join')" v-if="i_want_join==1">
							<view class="gn-img">
								<image src="../../static/home/gn5.png"></image>
							</view>
							<text>我要加盟</text>
						</view>
					</view>
				</scroll-view> -->
				<view class="billiards-box flexWrap">
					<block v-for="(item,index) in billiardsList" :key='index'>
						<view class="billiards-item flexWarpCenterColumn" @tap="goTable(item)" :class="{busy:item.status==2||item.status==99,repair:item.status==3}" v-if="item.type==1">
							<view class="billiards-info flexWarpCenterColumn">
								<view class="billiards-status">{{item.status==1?'闲':item.status==2||item.status==99?'忙':'停'}}</view>
								<view class="billiards-num">{{item.equipment_name}}</view>
							</view>
							<view class="billiards-btn">
								{{item.status==1?'去开台':item.status==2?'可预约：'+item.yuyue+' ':item.status==3?'维护中':'使用中'}}
							</view>
						</view>
						<view class="billiards-item mj flexWarpCenterColumn" @tap="goTable(item)" :class="{mjbusy:item.status==2,mjrepair:item.status==3}" v-else>
							<view class="billiards-info flexWarpCenterColumn">
								<view class="billiards-status">{{item.status==1?'闲':item.status==2?'忙':'停'}}</view>
								<view class="billiards-num">{{item.equipment_name}}</view>
							</view>
							<view class="billiards-btn">
								{{item.status==1?'去开台':item.status==2?'可预约：'+item.yuyue+' ':'维护中'}}
							</view>
						</view>
					</block>
				</view>
				<!-- <view class="customerservice-box flexWrapNo" @tap="makePhoneCall()">
					<image src="../../static/home/kf.png" class="customerservice-icon"></image>
					<text>联系客服</text>
				</view> -->
				<view class="coupon-box" v-if="couponShow">
					<view class="coupon-cont">
						<view class="coupon-head">
							{{couponList[0].activity_name||'加载中...'}}
						</view>
						<view class="coupon-padd">
							<view class="coupon-item flexWrap" :class="{one:couponLenth==1,two:couponLenth==2}" v-for="(item,index) in couponList" :key="index" v-if="index<=3">
								<view class="coupon-left">
									<view>{{item.title}}</view>
								</view>
								<view class="coupon-right">
									x{{item.num}}
								</view>
							</view>
						</view>
					</view>
					<view class="receive-btn" @tap="receiveCoupon()">开心收下</view>
				</view>
				<view class="mask-box" v-if="couponShow" @tap="closeCoupon()"></view>
			</view>
		</template>
	</view>
</template>

<script>
	import loginWrap from '@/pages/login/login.vue';
	export default {
		components: {
			loginWrap
		},
		data() {
			return {
				pageOpc:0,
				lat:"",
				lon:"",
				store_name:"",
				address_str:"",
				time:'13:10',
				billiardsList:[],
				customHeight:{
					height:30,
					top:20
				},
				navigationBarHeight:"",
				navHeight:"",
				iStatusBarHeight:"",
				encryptedData:"",
				iv:"",
				wxCode:"",
				storeInfo:{},
				bannerList:[],
				phoneNumber:"",
				couponShow:false,
				couponList:[],
				couponLenth:0,
				store_id:'',
				position_navigation:0,//位置导航
				tuan_verification_coupon:0,//团购验券
				contact_customers:0,//联系客服
				one_click_wifi:0,//一键wifi
				franchise_consulting:0,//加盟咨询
				i_want_join:0,//我要加盟
				open:0,//开门
				isShowRoute:0
			};
		},
		onLoad(ops) {
			if(ops&&ops.store_id){
				this.store_id=ops.store_id
				uni.setStorageSync('store_id',this.store_id)
				this.storeDetails();
			}
			// #ifdef MP-WEIXIN
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//胶囊高度
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			this.customHeight = wx.getMenuButtonBoundingClientRect()
			 // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = this.customHeight.height + (this.customHeight.top - this.iStatusBarHeight) * 2
			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = this.navigationBarHeight + this.iStatusBarHeight
			//#endif
		},
		onShareAppMessage() {
			return {
				path:'/pages/home/index?store_id='+this.store_id
			};
		},
		onShow() {
			this.store_id=uni.getStorageSync('store_id')
			if(this.store_id){
				this.storeDetails();
				if(uni.getStorageSync('token')){
					this.getNewCoupon();
					this.paymentConfig();
				}else{
					uni.showModal({
						title: '未登录',
						content: '请先登录',
						success: function(res) {
							if(res.confirm){
								uni.navigateTo({
									url: "/pages/login/login"
								});
							}
						}
					});
				}
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods:{
			showCoupon(){
				this.couponShow=true
			},
			closeCoupon(){
				this.couponShow=false
			},
			showTips(){
				this.$tools.showToast('先选择台桌，然后点击顶部"验券开台"')
			},
			// 配置
			paymentConfig(){
				this.$request.post(this.$api.paymentConfig, {
					store_id:this.store_id
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data){
							
						}else{
							data={
								coupon: 0,
								order_cancellation: 0,
								recharge: 0,
								wechat_payment: 0
							}
						}
						uni.setStorageSync('paymentConfig',data)
					}
				})
			},
			// 店铺详情
			storeDetails(){
				this.$request.post(this.$api.storeDetails, {
					store_id:this.store_id,
					longitude:uni.getStorageSync('longitude')||"106.540541",
					latitude:uni.getStorageSync('latitude')||"29.590991"
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.storeInfo=data
						this.billiardsList=data.equipment_list
						if(data.shop_cover_images){
							this.bannerList=data.shop_cover_images.split(',')
						}
						this.phoneNumber=data.customer_service_mobile||""
						this.position_navigation=data.position_navigation||0//位置导航
						this.tuan_verification_coupon=data.tuan_verification_coupon||0//团购验券
						this.contact_customers=data.contact_customers||0//联系客服
						this.one_click_wifi=data.one_click_wifi||0//一键wifi
						this.franchise_consulting=data.franchise_consulting||0//加盟咨询
						this.i_want_join=data.i_want_join||0//我要加盟
						this.open=data.open||0//开门
						uni.setStorageSync('customerServiceMobile',this.phoneNumber)
						uni.setStorageSync('crowdCode',data.crowd_code)
						uni.setStorageSync('shop_name',data.shop_name)
						if(this.position_navigation==0&&this.tuan_verification_coupon==0&&this.contact_customers==0&&this.one_click_wifi==0&&this.i_want_join==0&&this.open==0){
							this.isShowRoute=0
						}else{
							this.isShowRoute=1
						}
					}
				})
			},
			// 获取新用户优惠券
			getNewCoupon(){
				this.$request.post(this.$api.newCoupon, {
					store_id:this.store_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					uni.hideToast();
					if (res.code==1) {
						for (let i in data) {
							data[i].num = data[i].sum
						}
						this.couponList=data
						this.couponLenth=this.couponList.length
						this.couponShow=true
					}else{
						this.couponShow=false
						uni.hideToast();
					}
				})
			},
			// 领取优惠券
			receiveCoupon(){
				this.$request.post(this.$api.receiveCoupon, {
					coupon:JSON.stringify(this.couponList),
					store_id:this.store_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.closeCoupon();
						this.$tools.showToast('领取成功')
					}
				})
			},
			goTable(item){
				if(item.status==3){
					this.$tools.showToast('当前桌正在维护中，请选择其他桌台');
					return;
				}
				if(item.status==99){
					this.$tools.showToast('当前桌正在使用中，请选择其他桌台');
					return;
				}
				uni.navigateTo({
					url:"/pages/home/billiardsDetails?equipment_id="+item.id
				})
			},
			// 导航
			navigation() {
				let latitude = this.storeInfo.latitude;
				let longitude =  this.storeInfo.longitude;
				let name = this.storeInfo.shop_name;
				let address = this.storeInfo.location;
				if (!latitude || !longitude || !name) {
					uni.showToast({
						title: '打开地图失败,该地址无法查询到',
						duration: 2000,
						icon: 'none'
					});
					console.log(latitude)
					console.log(longitude)
					console.log(name)
					return;
				}
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: name,
					address: address,
					fail: res => {
						console.log(res);
						uni.showModal({
							content: '打开地图失败,该地址无法查询到'
						});
					}
				});
			},
			// 拨打电话
			makePhoneCall() {
				let that = this
				if(!that.phoneNumber){
					this.$tools.showToast('暂无客服电话')
					return;
				}
				uni.makePhoneCall({
					phoneNumber:that.phoneNumber
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f7f7f7 !important;
	}
	.content{
		padding: 28upx;
	}
	.change-box{
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333;
		width: 233upx;
		border: 2rpx solid rgba(51,51,51,0.1);
		border-radius: 63upx;
		justify-content: center;
		position: fixed;
		z-index: 999;
		.change-icon{
			width: 36upx;
			height: 36upx;
			margin-left: 24upx;
		}
	}
	.shop-box{
		.banner-box{
			height: 380upx;
			.banner-item{
				height: 380upx;
				border-radius:16upx;
				overflow: hidden;
				.shop-img{
					height: 100%;
				}
			}
		}
		.shop-info{
			margin-top: 28upx;
			.info-top{
				.shop-name-box{
					.shop-name{
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 50upx;
						color: #333;
					}
					.shop-status{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						width: 108upx;
						height: 44upx;
						line-height: 44upx;
						text-align: center;
						background: #50AB6E;
						border-radius: 36upx;
						margin-left: 24upx;
					}
					.repair-status{
						background:#fc750d;
					}
				}
				.navigation-box{
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 36upx;
					color: #FFB726;
					.navigation-icon{
						width: 36upx;
						height: 36upx;
						margin-right: 8upx;
					}
				}
			}
			.address-info{
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color:#959595;
				margin-top: 14upx;
				align-items: baseline;
			}
		}
	}
	.gn-box{
		.gn-item{
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-right: 20upx;
			.gn-img{
				width: 120upx;
				height: 120upx;
				margin-bottom: 10upx;
			}
		}
	}
	.billiards-box{
		margin-top: 40upx;
		flex-wrap: wrap;
		.billiards-item{
			width: 314upx;
			margin-bottom: 40upx;
			.billiards-info{
				width: 314upx;
				height: 216upx;
				justify-content: center;
				background: url("../../static/home/idle.png") no-repeat center/100% 100%;
				.billiards-status{
					width: 40upx;
					height: 40upx;
					line-height: 40upx;
					text-align: center;
					background:#50AB6E;
					border-radius: 50%;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				.billiards-num{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 50upx;
					color: #FFFFFF;
					text-shadow: 0px 2px 6upx rgba(0,0,0,0.65);
					margin-top: 10upx;
				}
			}
			.billiards-btn{
				height: 44upx;
				line-height: 44upx;
				width: 140upx;
				text-align: center;
				border: 2upx solid #FFB726;
				border-radius: 42upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: #FFB726;
			}
		}
		.mj{
			.billiards-info{
				width: 300upx;
				height: 220upx;
				background: url("../../static/home/mj-idle.png") no-repeat center/100% 100%;
			}
		}
		.busy{
			.billiards-info{
				background: url("../../static/home/busy.png") no-repeat center/100% 100%;
				.billiards-status{
					background:#FF4726;
				}
			}
			.billiards-btn{
				width: 204upx;
				border: 2upx solid #EB5638;
				color: #EB5638;
				background: transparent;
			}
		}
		.mjbusy{
			.billiards-info{
				background: url("../../static/home/mj-busy.png") no-repeat center/100% 100%;
				.billiards-status{
					background:#FF4726;
				}
			}
			.billiards-btn{
				width: 204upx;
				border: 2upx solid #EB5638;
				color: #EB5638;
				background: transparent;
			}
		}
		.repair{
			.billiards-info{
				background: url("../../static/home/repair.png") no-repeat center/100% 100%;
				.billiards-status{
					background:#969696;
				}
			}
			.billiards-btn{
				width: 140upx;
				border: 2upx solid #969696;
				color: #969696;
			}
		}
		.mjrepair{
			.billiards-info{
				background: url("../../static/home/mj-repair.png") no-repeat center/100% 100%;
				.billiards-status{
					background:#969696;
				}
			}
			.billiards-btn{
				width: 140upx;
				border: 2upx solid #969696;
				color: #969696;
			}
		}
	}
	.customerservice-box{
		width: 280upx;
		height: 60upx;
		border: 2upx solid #333333;
		border-radius: 16upx;
		font-size: 26upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #969696;
		justify-content: center;
		margin:50upx auto;
		.customerservice-icon{
			width: 36upx;
			height: 36upx;
			margin-right: 18upx;
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.coupon-box{
		width: 646upx;
		height: 780upx;
		background:url('../../static/home/couponBox.png') no-repeat center/ 100% 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.coupon-cont{
			width: 425upx;
			border-radius: 10upx;
			position: absolute;
			top: 100upx;
			left: 0;
			right: 0;
			margin: auto;
			.coupon-head{
				color: #760D00;
				font-size:48upx;
				text-align: center;
				font-weight: bold;
				height: 106upx;
				line-height: 106upx;
			}
			.coupon-padd{
				padding-top: 20upx;
				.coupon-item{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #DD1800;
					height: 68upx;
					line-height: 68upx;
					background: rgba(255,250,211,0.39);
					border-radius: 16upx;
					margin-top: 12upx;
					padding: 0 24upx;
				}
				.coupon-left{
					@include ellipsis(1);
				}
				.one{
					height: 146upx;
					line-height: 146upx;
					margin-top: 40upx;
				}
				.two{
					height: 98upx;
					line-height: 98upx;
					margin-top: 20upx;
				}
			}
		}
		.receive-btn{
			width: 340upx;
			height: 80upx;
			line-height: 80upx;
			border-radius: 50upx;
			background-color: #FDD56F;
			position: absolute;
			top: 546upx;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			color: #9F610F;
			font-size: 36upx;
			font-weight: 600;
		}
	}
</style>
